<template>
  <div class="site-management">
    <!-- 顶栏 -->
    <el-card class="header">
      <h2>充电站管理</h2>
      <br/>
      <!-- 筛选区域 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="stationName" placeholder="站点名称"/>
        </el-col>
        <el-col :span="6">
          <el-input v-model="address" placeholder="详细地址"/>
        </el-col>
        <el-col :span="5">
          <el-select v-model="status" placeholder="状态">
            <el-option label="全部" :value="null"/>
            <el-option label="正常" :value="'正常'"/>
            <el-option label="已下线" :value="'已下线'"/>
          </el-select>
        </el-col>
        <el-col :span="7">
          <el-button type="primary" @click="fetchData">查询</el-button>
          <el-button @click="resetFilters">重置</el-button>
          <el-button type="primary" @click="openAddDialog">新增</el-button>
          <el-button type="danger" @click="onBatchDelete">批量删除</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 站点列表 -->
    <station-table
        :stations="stations"
        :page="page.value"
        :size="size.value"
        :total="total"
        @fetch="fetchData"
        @view="viewStation"
        @edit="editStation"
        @toggle="(row) => toggleStationStatus(row, fetchData)"
        @delete="(row) => deleteStation(row, fetchData)"
        @selection-change="handleSelectionChange"
        @update:page="updatePage"
        @update:size="updateSize"
    />

    <!-- 新增站点弹窗 -->
    <el-dialog v-model="addDialogVisible" title="新增站点" width="85%">
      <station-add-form
          v-if="addDialogVisible"
          @refresh="fetchData"
          @close="addDialogVisible = false"
      />
    </el-dialog>

    <!-- 编辑站点弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑站点" width="85%">
      <edit-station-form
          v-if="editDialogVisible"
          :edit-data="editForm"
          @refresh="fetchData"
          @close="editDialogVisible = false"
      />
    </el-dialog>

    <!-- 查看弹窗 -->
    <el-dialog v-model="viewDialogVisible" title="查看站点信息" width="85%">
      <station-detail
          v-if="viewDialogVisible"
          :view-data="viewForm"
      />
    </el-dialog>
  </div>
</template>

<script>
import StationTable from '../../components/StationTable.vue';
import StationAddForm from '../../components/StationAddForm.vue';
import StationDetail from '../../components/StationDetail.vue';
import EditStationForm from '../../components/EditStationForm.vue';

import {useStationData} from '../../composables/useStationData.js';   // 列表/删除/上下线
import {useStationForm} from '../../composables/useStationForm.js';   // 新增表单
import {useEditStation} from '../../composables/useEditStation.js';
import {ElMessage, ElMessageBox} from "element-plus";   // 编辑表单

export default {
  name: 'StationManagement',
  components: {
    StationTable,
    StationAddForm,
    StationDetail,
    EditStationForm,
  },
  setup() {
    // 1) 列表数据及操作
    const {
      stations,
      selectedStations,
      page,
      size,
      total,
      loading,
      stationName,
      address,
      status,
      fetchData,
      handleSelectionChange,
      deleteStation,
      toggleStationStatus,
      batchDelete,
    } = useStationData();

    // 2) 新增表单弹窗

    const {addDialogVisible, openAddDialog} = useStationForm();

    // 3) 编辑表单弹窗 & 查看表单弹窗
    const {
      editDialogVisible,
      viewDialogVisible,
      editForm,
      viewForm,
      editStation,
      viewStation,
    } = useEditStation();

    // 重置筛选条件
    const resetFilters = () => {
      page.value = 1;
      size.value = 5;
      stationName.value = '';
      address.value = '';
      status.value = null;
      fetchData();
    };

    // 批量删除
    const onBatchDelete = () => {
      ElMessageBox.confirm(
          '确认要删除选中的项吗？',
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(() => {
        // 用户点击确认后执行删除操作
        batchDelete(fetchData);
      }).catch(() => {
        // 用户点击取消后可以在这里处理
        ElMessage.info('删除操作已取消');
        console.log('删除操作已取消');
      });
    };

    // 分页相关
    const updatePage = (newPage) => {
      page.value = newPage;
      fetchData();
    };
    const updateSize = (newSize) => {
      size.value = newSize;
      page.value = 1;
      fetchData();
    };

    // 初始化
    fetchData();

    return {
      // 列表
      stations,
      selectedStations,
      page,
      size,
      total,
      loading,
      stationName,
      address,
      status,

      // 方法
      fetchData,
      resetFilters,
      handleSelectionChange,
      deleteStation,
      toggleStationStatus,
      onBatchDelete,
      updatePage,
      updateSize,

      // 新增弹窗
      addDialogVisible,
      openAddDialog,

      // 编辑 & 查看
      editDialogVisible,
      viewDialogVisible,
      editForm,
      viewForm,
      editStation,
      viewStation,
    };
  },
};
</script>

<style scoped>
.site-management {
  padding: 20px;
  margin: 0;
  height: 100vh;
  background: linear-gradient(to right, rgba(255, 165, 0, 0.5), rgba(255, 215, 0, 0.5));
}

.header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}
</style>
